@import "animation.styl"

img[lazy="loading"]
  object-fit: none !important
div[lazy="loading"]
  background-size: auto !important

.bg-white
  background-color white
  
a
  color #2c3e50
  text-decoration none

.autoHeight
  height auto

.fullHeight
  height 100%

input[disabled],button[disabled]
  cursor not-allowed

.flex
  display flex

.flex-wrap
  flex-wrap wrap

.flex-column
  flex-direction column

.flex-start
  justify-content flex-start

.flex-justify-center
  justify-content center

.flex-justify-between
  justify-content space-between

.flex-grow
  flex-grow 1

.flex-right
  flex-direction column-reverse

.text-left
  text-align left

.text-right
  text-align right

.text-center
  display block
  text-align center

.vertical-center
  vertical-align center

.text-ellipsis
  overflow hidden
  text-overflow ellipsis
  white-space nowrap
.text-ellipsis-mul
  overflow hidden
  text-overflow ellipsis
  white-space break
  display -webkit-box
  -webkit-line-clamp 2
  -webkit-box-orient vertical

.overflow-scroll
  overflow scroll
.overflow-y-scroll
  overflow-y scroll


.float-right
  float right

.float-left
  float left
.clearfix
  clear both

.inline-block
  display: inline-block

.btn-radius-t-l
  border-top-left-radius 50% 100%
.btn-radius-b-r
  border-bottom-right-radius 50% 100%
.btn-radius-brackets
  -webkit-border-radius .5em / 1em
  -moz-border-radius .5em / 1em
  border-radius .5em / 1em
.btn-radius-skew
  -webkit-border-radius 5em 1em / 5em 1em
  -moz-border-radius 5em 1em / 5em 1em
  border-radius 5em 1em / 5em 1em
.btn-radius-trapezoid
  border-top-left-radius 25% 100%
  border-top-right-radius 25% 100%

.btn-gradient
  &.glassy
    text-shadow rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 0.18em 0.15em
    position relative
  &:after
    content ""
    position absolute
    width 90%
    height 60%
    top 0
    left 5%
    background-image -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) )
    background-image -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) )
    background-image gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) )
.icon-toggle-animation-cross
  filter drop-shadow(0 0 10px #FF0000)
  .toggle-content
    width 40px !important
    height 20px !important
    background #87cefa 
    &:after
      width 40px !important
      height 20px !important
      transform rotate(90deg)
      background #87cefa

.icon-toggle-animation-jump
  animation-name jump
  .toggle-content
    transform rotate(45deg)
    border-left 2px solid #000000
    border-top 2px solid #000000
    &:after
      border-left 2px solid #000000
      border-top 2px solid #000000
.icon-toggle-animation-diving
  animation-name diving
  .toggle-content
    transform rotate(45deg)
    border-right 2px solid #000000
    border-bottom 2px solid #000000
    &:after
      border-right 2px solid #000000
      border-bottom 2px solid #000000
.icon-toggle
  border none
  background transparent
  padding 0
  margin 0 auto
  width 2em
  text-align center
  vertical-align middle
  font-size 12px
  &:hover
    animation-duration 1s
    animation-timing-function ease
    animation-iteration-count infinite
  .toggle-content
    width 1em
    height 1em
    position relative
    display inline-block
    &:after 
      position absolute
      left 4px
      top 4px 
      content " "
      width 1em
      height 1em
.keywords
  color red

.block-transparent
  background transparent !important
  
@media screen and (min-width 1366px)
  .block
    background-color white
    margin 15px 0
    padding 20px
    width 100%
    height auto
    &.nobg
      background transparent
  button  
    width 82px
  .btn
    padding 0.25em 0.5em
  .btn-default
    box-shadow 0px 1px 2px rgba(0,0,0,0.1)
    &:hover
      box-shadow 0 1px 2px rgba(0,0,0,0.15)
  .btn-orange
    color white
    background #fa7d3c
    background -webkit-linear-gradient(top, #fa7d3c 0%,#f55f10 100%)
    background linear-gradient(top bottom, #fa7d3c 0%,#f55f10 100%)
    &:hover
      background #f4722e
      background -webkit-linear-gradient(top, #f4722e 0%,#f05807 100%)
      background linear-gradient(top bottom, #f4722e 0%,#f05807 100%)
  .link
    color $color-team-sii
  .img-content
    width 100%
    display inline-block
    border 1px solid #e5e9ef
    border-radius 4px
    padding 2px
    background-position center center
    background-repeat no-repeat
    background-size cover
  .img-content-sm
    display inline-block
    width 104px
    height 104px
    border 1px solid #e5e9ef
    border-radius 4px
    padding 2px
    background-position center center
    background-repeat no-repeat
    background-size cover
    margin-right 16px

/*当屏幕尺寸小于1366px时，应用下面的CSS样式*/
@media screen and (max-width 1366px)
  .block
    background-color white
    margin 10px 0
    padding 10px
    width 100%
    height auto

  button
    width 50px
    height 18px
    line-height 18px
    padding 0 10px
    font-size 10px
    
  .btn
    padding 0.15em 0.4em
  .btn-default
    box-shadow 0px 1px 2px rgba(0,0,0,0.1)
    &:hover
      box-shadow 0 1px 2px rgba(0,0,0,0.15)
  .btn-orange
    color white
    background #fa7d3c
    background -webkit-linear-gradient(top, #fa7d3c 0%,#f55f10 100%)
    background linear-gradient(top bottom, #fa7d3c 0%,#f55f10 100%)
    &:hover
      background #f4722e
      background -webkit-linear-gradient(top, #f4722e 0%,#f05807 100%)
      background linear-gradient(top bottom, #f4722e 0%,#f05807 100%)
  .link
    color $color-team-sii
  .img-content
    width 100%
    display inline-block
    border 1px solid #e5e9ef
    border-radius 4px
    padding 2px
    background-position center center
    background-repeat no-repeat
    background-size cover
  .img-content-sm
    display inline-block
    width 52x
    height 52px
    border 1px solid #e5e9ef
    border-radius 4px
    padding 2px
    background-position center center
    background-repeat no-repeat
    background-size cover
    margin-right 8px
